import React from 'react'
import './header.less'
import { Icon, Menu, Dropdown } from 'antd'
import { withRouter } from 'react-router-dom'

class HeaderView extends React.Component {

  state = {
    
  }

  menuClick = ({ key }) => {
    switch (key) {
      case 'logOut':
        window.localStorage.clear();
        this.props.history.push('/login');
        break;
      default:
        break;
    }
  };

  componentWillMount() {

  }

  render() {
    const menu = (
      <Menu onClick={this.menuClick.bind(this)}>
        <Menu.Item key="1">1st menu item</Menu.Item>
        <Menu.Item key="2">2nd memu item</Menu.Item>
        <Menu.Item key="logOut">退出登陆</Menu.Item>
      </Menu>
    );
    return (
      <section className="header">
        <div className="logo">
          {/* <img alt="" src="/logo_white.png" /> */}
        </div>
        <div className="menu">
          <span>react-demo</span>
        </div>
        <div className="user">
          <div className="operation"></div>
          <div className="userinfo">
          <Dropdown overlay={menu}>
            <a className="ant-dropdown-link" href={void(0)}>
            <img src="/assets/home/mainPage/avatar.png" alt=""/>
            <span className="name">{this.props.userInfo.userName}</span>
              <Icon type="caret-down" />
            </a>
          </Dropdown>
          </div>
        </div>
      </section>
    )
  }
}

export default withRouter(HeaderView);
